<template>

  <div class="top">
         <div class="left"><span></span></div>
         <div class="center" @click="seach()"><img src="./689b90fbea1238bfceff7d92089f83e.png" alt="" srcset="">
         <div class="title">{{scarch}}</div>
         </div>
         <div class="right"><span></span></div>
      
  </div>
  
</template>
<script>
export default {
  data() {
    return {
      scarch:""
    }
  },
  methods:{
seach(){
    this.$router.push('/seach')
}
  },
  mounted(){
      var self=this
    $.ajax({
                type: "get",
                url: "https://wq.jd.com/bases/searchpromptwords/searchpromptwords?_=1626074343416&sceneval=2&callback=jsonpCBKA",
                dataType: "jsonp",
                //这两句指定回调函数为：CallBackUser
                jsonp: 'callback',
                jsonpCallback: 'jsonpCBKA',
                success: function (data) {
                  console.log(data.searchwords.length);
                   var a=0
                   self.scarch=data.searchwords[0].searchword
                     setInterval(()=>{

                       if (a>=data.searchwords.length) { 
                         a=0
                       }else{
 self.scarch=data.searchwords[a].searchword
                                 a++
                       }
                     },5000)
                
                }
            });
  }
}
</script>
<style  scoped>
 .top{
        height: 1.2rem;
        width: 10rem;
        background: rgb(200, 37, 25);
        position: relative;
    }
    .left{
        width: 1.066667rem;
        height: 1.2rem;
    background: rgb(200, 37, 25);
       position: absolute;
       left: 0;
    }
    .top .left span{
 width: .533333rem;
    height: .666667rem;
    display: inline-block;
    background: url() no-repeat 50%;
    background-position:.133333rem -0.053333rem;
    background-size: contain;
        position: absolute;
    top: .373333rem;
    }
   .top .center{
       left: 1.066667rem;
       right: 1.066667rem;
       top: .106667rem;
       position: relative;
bottom: 0;
text-align: center;
font-size: .48rem;
       background: rgb(200, 37, 25);
        position: absolute;
    }
     .top .center img{
         width: 100%;
    height: .906667rem;
     }
     .top .center .title{
       position: absolute;
      
    top: .133333rem;
    left: 2.213333rem;
    color: gray;

     }
    .top .right{
        width: 1.066667rem;
        height: 1.2rem;
      background: rgb(200, 37, 25);
         position: absolute;right: 0;
    }
    .top .right span{
            display: inline-block;
    margin: .32rem .16rem .32rem .266667rem;
    width: .533333rem;
    height: .533333rem;
    background: url() no-repeat 50%;
    background-size: .533333rem;
    }

</style>
